<template>
	<div class="body">
		<div class="user">
			<img src="../assets/logo.png" alt="">
			<div v-if="$store.state.login">{{$store.state.userName}}</div>
			<div v-else @click="login">点击登录</div>
		</div>
		<section>
			<div class="sec1">
				<div class="dingdan">
					<div class="left">我的订单</div>
					<div class="right" @click="order">
						<div>全部订单</div>
						<van-icon name="arrow" color="#101010"></van-icon>
					</div>
				</div>
				<div class="sec1-1">
					<div>
						<van-icon name="lock" color="#1ba4f0" size="30"></van-icon>
						<div>待支付</div>
					</div>
					<div>
						<van-icon name="lock" color="#1ba4f0" size="30"></van-icon>
						<div>待收货</div>
					</div>
					<div>
						<van-icon name="lock" color="#1ba4f0" size="30"></van-icon>
						<div>退换货</div>
					</div>
				</div>
			</div>
			
			<div class="xuanze" @click="shoucang">
				<div>收藏</div>
				<van-icon name="arrow" color="#101010"></van-icon>
			</div>
			<div class="xuanze" @click="address">
				<div>收货地址</div>
				<van-icon name="arrow" color="#101010"></van-icon>
			</div>
			<div class="xuanze">
				<div>绑定/修改手机号</div>
				<van-icon name="arrow" color="#101010"></van-icon>
			</div>
			<div class="xuanze">
				<div>足迹</div>
				<van-icon name="arrow" color="#101010"></van-icon>
			</div>
			<button v-if="$store.state.login" @click="exitAccount">退出账号</button>
			<div class="cheng"></div>
		</section>
	</div>
</template>

<script>
	import {
		Icon,Button
	} from 'vant'
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			order(){
				this.$router.push('/order')
			},
			login(){
				this.$router.push('/login')
			},
			shoucang(){
				this.$router.push('/collection')
			},
			address(){
				this.$router.push('/address')
			},
			exitAccount(){
				localStorage.removeItem('userInfo')
				location.reload()
			}
		},
		components: {
			[Icon.name]: Icon,
			[Button.name]: Button,
		},
		created() {
			console.log(this.$store.state.commodity)
			// this.$axios.get('http://116.63.80.218/users/login',{
			// 	params:{
			// 		userName:'CBX',
			// 	}
			// })
			// .then(res=>{
			// 	console.log(res)
			// })
		}
	}
</script>

<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;
	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.body {
		.user {
			width: 100vw;
			height: 30vh;
			background-color: @themeColor;
			display: flex;
			align-items: center;
			padding: 2vw;

			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;

			}

			div {
				color: #fff;
				font-size: 20px;
				margin-left: 2vw;
			}
		}

		section {
			width: 100vw;
			position: relative;
			top: -20px;
			border-top-left-radius: 25px;
			border-top-right-radius: 25px;
			background-color: @backColor;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>.sec1 {
				width: 90%;
				padding: 2vw;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 13px;
				margin-top: 5vw;
				&>.dingdan{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&>.left{
						font-weight: 700;
					}
					&>.right{
						display: flex;
						div{
							color: #333;
						}
					}
				}
				&>.sec1-1{
					margin-top: 3vw;
					width: 80%;					
					display: flex;
					justify-content: space-around;
					align-items: center;
					div{
						color: #101010;
					}
				}
				
			}
			.xuanze{
				width: 100vw;
				height: 15vw;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 2vw;
				align-items: center;
				box-shadow: #ccc 1px 1px 5px;
				margin-top: 4vw;
			}
			button{
				width: 75vw;
				height: 15vw;
				background-color: #fd5c5c;
				color: #fff;
				border: none;
				border-radius: 3vw;
				margin-top: 5vw;
				font-size: 25px;
			}
			.cheng{
				height: 15vw;
			}
		}
	}
</style>
